<template>
  <alert :alertData="alertData" :opacity="alertOpacity" />

  <div class="div-content-wrapper">

    <div
    class="
      h-100
      w-100
      d-flex
      flex-column
      justify-content-center
      align-items-center
    "
    >

      <label class="lbl-select-model mb-2">选择模型</label>
      <div style="position:relative;" 
      class="d-flex flex-row justify-content-around flex-wrap mb-3"
      :style="{width:containerWidth}">

          <div class="form-check">
            <input 
            id="in-stsb-bert"
            class="in-model-select form-check-input" 
            type="radio" 
            value="bert" 
            v-model="modelName"/>
            <label class="lbl-model-select" for="in-stsb-bert">BERT</label>
          </div>

          <div class="form-check">
            <input 
            disabled
            id="in-stsb-bbc"
            class="in-model-select form-check-input" 
            type="radio" 
            value="nerbbc" 
            v-model="modelName"/>
            <label class="lbl-model-select" for="in-stsb-bbc">BBC</label>
          </div>
          
          <div class="form-check">
            <input 
            id="in-stsb-blistm"
            class="in-model-select form-check-input" 
            type="radio" 
            value="nerbilstm" 
            v-model="modelName"/>
            <label class="lbl-model-select" for="in-stsb-blistm">BILSTM</label>
          </div>

          <div class="form-check">
            <input 
            id="in-stsb-crf"
            class="in-model-select form-check-input" 
            type="radio" 
            value="nercrf" 
            v-model="modelName"/>
            <label class="lbl-model-select" for="in-stsb-crf">CRF</label>
          </div>

          <div class="form-check">
            <input 
            id="in-stsb-nerhmm"
            class="in-model-select form-check-input" 
            type="radio" 
            value="nerhmm" 
            v-model="modelName"/>
            <label class="lbl-model-select" for="in-stsb-nerhmm">HMM</label>
          </div>
        </div>

      <div class="input-group input-group-lg mb-3"
      :style="{width:containerWidth}">
        <input
          class="form-control in-sentence"
          type="text"
          placeholder="输入一句话..."
          v-model="sentence"
          @keydown.enter="submitSentence"
        />
        <button class="btn btn-secondary" @click="submitSentence">
          <span
            class="spinner-border spinner-border-sm"
            v-show="isLoadingShow"
          />
          识别
        </button>
      </div>

      <div class="div-sentence-part-container d-flex flex-row flex-wrap overflow-auto"
      :style="{width:containerWidth}">
        <span
          class="span-sentence-part"
          :style="{
            color: item.type === '' ? 'black' : sentencePartColors[item.type],
            cursor: item.type === '' ? 'text' : 'pointer',
            textDecoration: item.type === '' ? 'none' : 'underline dotted',
          }"
          v-for="(item, index) in sentenceParts"
          :key="index"
          data-bs-toggle="tooltip"
          data-bs-placement="bottom"
          :title="item.type"
        >
        <!-- @click="goToZstp(item)" -->
          {{ item.text }}
        </span>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import { HWMI_URLS } from "../modules/Api";
import ANIMATIONS_COMMON from "../modules/AnimationsCommon";
import {
  divideSentence,
  generateSentencePartColors,
} from "../modules/stsb/DivideSentence";
import {isMobileBrowser} from "@/modules/Utilities";


import { Tooltip } from "bootstrap";

import Alert from "./Common/alert.vue";

let toolTips=[];

export default {
  components:{
    Alert
  },
  data: () => ({
    sentence: "",
    isLoadingShow: false,

    modelName:"bert",

    // {text,type}
    sentenceParts: [],
    sentencePartColors: {},

    alertData: {
      show: false,
      message: "",
      type: "primary",
    },
    alertOpacity: 0,

    containerWidth: isMobileBrowser() ? "90%" : "75%",
  }),
  methods: {
    submitSentence() {
      if(this.isLoadingShow||this.alertData.show){
            return;
      }

      if (this.sentence === "") {
        ANIMATIONS_COMMON.showAlert(this,"请输入一个句子", "danger");
        return;
      }

      this.isLoadingShow = true;

      axios
        .get(HWMI_URLS.stsbRequestUrl, {
          params: {
            sentence: this.sentence,
            model:this.modelName
          },
        })
        .then((res) => {
          this.sentenceParts = divideSentence(
            this.sentence,
            res.data.data,
            0
          );
          this.sentencePartColors = generateSentencePartColors(
            res.data.data
          );
        })
        .catch((reason) => {
          console.log(reason)
          ANIMATIONS_COMMON.showAlert(this, reason, "danger");
        })
        .finally(() => {
          this.isLoadingShow = false;
        });
    },
    goToZstp(item) {
      if(item.type===""){
        return;
      }

      for(const i of toolTips){
        i.hide();
      }
      
      this.$router.push({
        name: "zstp",
        query: {
          keyword:item.text
        },
      });
    },
  },
  updated() {
    const tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );

    toolTips=tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new Tooltip(tooltipTriggerEl);
    });
  },
};
</script>

<!-- Note on first use of scss in vue:
 npm install -D sass-loader node-sass ; npm rebuild node-sass 
 No need to add rule in vue.config.js -->
<style lang="scss" scoped>
@import "../App";
@import "../CommonStyles";

.div-content-wrapper {
  @include full-parent-size;
  @include page-background-image("../assets/images/stsb-bkg.png");
}

.in-model-select{
  font-size: 14px;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 3px;
  float:none;
}

.lbl-model-select{
  font-size: 14px;
}

.lbl-select-model{
  font-weight: bold;
}

.in-sentence{
  background-color: transparent;

  border: 1px solid rgb(108,117,125);

  &:focus{
    // override bootstrap style
    box-shadow: none;
  }
}

.div-sentence-part-container {
  max-height: 70%;
  padding: 10px;

  @include slim-scroll-bar;
}

.span-sentence-part {
  font-size: 25px;
}
</style>